<template>
  <div class="player-lyric" :lyricStyle="lyobj">
    <scroll
      :disable-bar="disableBar"
      :height="height"
      disable-wheel
      @moveStart="isDrag = true"
      @moveEnd="isDarg = false"
      ref="scroll"
    >
      <ul>
        <li
          :class="[
            index == lyricIndex ? `player-action-${theme}` : '',
            middle ? 'player-action-middle' : ''
          ]"
          v-for="(line, index) in lyricArray"
          :key="index"
        >
          {{ line[1] }}
        </li>
      </ul>
    </scroll>
  </div>
</template>
<script>
import { theme } from '../mixin/global/theme'
import scroll from '../components/scroll/scroll.vue'
import { parseLyric } from '../utils/parse-lyric'
export default {
  mixins: [theme],
  components: { scroll },
  props: {
    disableBar: {
      type: Boolean,
      default: false
    },
    height: {
      type: String,
      default: ''
    },
    lyric: {
      //歌词
      type: String,
      default: ''
    },
    // middle 判断是一行歌词 还是整体列表
    middle: {
      type: Boolean,
      default: false
    },
    currentTime: {
      //当前播放时间
      type: Number,
      default: 0
    },
    scrollNum: {
      type: Number,
      default: 5
    }
  },
  computed: {
    lyobj () {
      return {
        height: this.middle ? '30px' : this.height
      }
    }
  },
  name: 'Lyric',
  mounted () {
    console.log('&&&&&&&&&&&&&&', this.lyric)
  },
  watch: {
    lyric () {
      //监听歌词的变化
      console.log(99999999999999999)
      this.lyricIndex = -1
      console.log('%%%%%%%%%', this.lyric)
      // 使用歌词处理插件 整理歌词
      this.lyricArray = parseLyric(this.lyric)
      console.log(this.lyricArray)
    },
    currentTime (currentTime) {
      // 监听当前歌曲的播放时间 和歌词做对比 进行滚动
      for (var i = 0; i < this.lyricArray.length; i++) {
        const line = this.lyricArray[i] //line[0] 时间  line[1] 歌词
        const nextLine = this.lyricArray[i + 1] //下一行 //nextLine[0] 时间 nextLine[1]歌词
        // 当前音频播放时间 大于歌词的时间 或者 当前时间 小于下一行的时间
        if (
          currentTime >= line[0] &&
          (!nextLine || currentTime < nextLine[0])
        ) {
          //根据下标滚动
          this.lyricIndex = i //当前播放歌词的下标等于i
          if (this.middle) {
            //根据当前下标 滚动组件
            this.$refs.scroll.scrollTo(-30 * this.lyricIndex, 0, false)
          } else {
            this.$refs.scroll.scrollTo(-40 * this.lyricIndex, 0, false)
          }
        }
      }
    }
  },
  data () {
    return {
      isDarg: false, //是否在拖动歌词进度条，true的话禁用歌词scrollTo
      lyricArray: [], //歌词整理好的数据
      isDrag: false, //是否拖拽歌词
      lyricIndex: -1 //当前显示歌词下标
    }
  }
}
</script>
<style lang="less">
.player-lyric {
  padding: 0 20px;
  overflow-y: auto;
  height: 350px;
  ul {
    text-align: center;
    list-style: none;
    li {
      height: 30px;
      line-height: 30px;
      padding: 5px 0px;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
.player-action-light {
  font-size: 28px;
  color: var(--primary);
}
.player-action-dark {
  font-size: 28px;
  color: #b82525;
}
.player-action-green {
  font-size: 28px;
  color: var(--green-main-color);
}
/* list 形式时middle为true--改变字号 */
.player-action-middle {
  font-size: 13px;
  text-align: left;
}
</style>
